<template>
  <div class="app-container" ref="drap-container">
    <div class="top" v-drag="'coverage'">
      <span class="tip" v-text="'图层'"></span>
      <span class="turnoff" v-text="'×'" @click="changeCoverage"></span>
    </div>
    <div class="layer-info">
      <ul>
        <li
          v-for="(item, i) in layer"
          :key="i"
          :class="{ work: workid == item.id }"
          @click="toggleWorkLayer(item)"
        >
          <span class="img-wra" @click.stop="lockLayer(item, i)"
            ><img :src="layerSvg.find(item => item.indexOf('open') != -1)" alt=""
          /></span>
          <span class="img-wra" @click.stop="toggleLayerHidden(item, i)"
            ><img
              :src="
                item.isHidden
                  ? layerSvg.find(item => item.indexOf('eyeoff') != -1)
                  : layerSvg.find(item => item.indexOf('eye') != -1)
              "
              alt=""
          /></span>
          <span class="name" v-text="item.lab"></span>
        </li>
      </ul>
    </div>
    <div class="bot-func">
      <img :src="layerSvg.find(item => item.indexOf('add') != -1)" @click="addLayer" />
      <img
        :src="layerSvg.find(item => item.indexOf('delete') != -1)"
        :class="{ disabled: layer.length <= 1 }"
        @click="deleteLayer"
      />
      <img :src="layerSvg.find(item => item.indexOf('edit') != -1)" @click="editLayer" />
    </div>
  </div>
</template>

<script>
import layerSvg from "@/assets/layer_svg";

import { mapState, mapGetters } from "vuex";
export default {
  name: "coverage",
  props: ["sign"],
  data() {
    return {
      layerSvg,
    };
  },
  computed: {
    ...mapState(["editor", "graph", "layer", "workid"]),
    ...mapGetters(["parent"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 创建初始父元素
      this.addLayer();
    });
  },
  methods: {
    changeCoverage() {
      this.$emit("changeCoverage");
    },
    addLayer() {
      this.$store.state.layer.push({
        id: Symbol(),
        lab: "新建图层",
        val: this.graph.getDefaultParent().insert(new mxCell()),
        isHidden: false,
      });
      this.$store.state.workid = this.$store.state.layer[this.$store.state.layer.length - 1].id;
      console.log(this.graph.getDefaultParent());
    },
    // 锁死一个图层
    lockLayer(layer, i) {},
    // 隐藏一个图层
    toggleLayerHidden(layer, i) {
      this.graph.getModel().setVisible(layer.val, !this.graph.getModel().isVisible(layer.val));
      layer.isHidden = !layer.isHidden;
    },
    // 切换工作图层
    toggleWorkLayer(item) {
      this.$store.state.workid = item.id;
    },
    // 图层改名
    editLayer() {
      let index = this.$store.state.layer.findIndex(item => item.id == this.workid);
      this.$prompt("请输入图层名称：", "图层改名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: this.layer[index].lab,
      }).then(
        ({ value }) => {
          this.$store.commit("editLayerName", [index, value]);
        },
        () => {}
      );
    },
    // 删除图层
    deleteLayer() {
      /**
      TODO: 此处是否真正将图层cell彻底删除存疑，removeFromParent在父元素中删除了cell，
        removeStateForCell在内存中删除了cell的存在，splice删除了图层所在数组，但是依然不能确定cell的实际状态
      XXX: 但是已经在内存中删除、不再消耗内存空间，且用户不可见此cell，可认为此cell在逻辑上已经被彻底删除

        使用导出/保存的字符串进行尝试，删除前后的字符串有着明显的体量区别，相关cell可以认为已经删除
       */
      this.$store.state.layer.find(item => item.id == this.workid).val.removeFromParent();
      this.graph.removeStateForCell(
        this.$store.state.layer.find(item => item.id == this.workid).val
      );
      this.$store.state.layer.splice(
        this.$store.state.layer.findIndex(item => item.id == this.workid),
        1
      );

      // 删除后默认将第一个图层作为下一个工作图层
      this.$store.state.workid = this.layer[0].id;
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background: #fff;
  position: absolute;
  left: 300px;
  top: 40px;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 0 15px 3px #aaa;

  .top {
    cursor: all-scroll;
    height: 35px;
    line-height: 35px;
    background: #3d3f47;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    .turnoff {
      position: absolute;
      right: 10px;
      cursor: pointer;
      display: inline-block;
    }
  }
  .layer-info {
    ul {
      list-style: none;
      height: 250px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #d4d4d4;

      li {
        width: 280px;
        padding: 5px 3px;
        text-align: left;
        padding-left: 15px;
        background: #e8e8e8;
        border-bottom: 1px solid rgb(195, 195, 195);

        &.work {
          background: #8c8c8c;
          color: #fff;
        }
        .img-wra {
          display: inline-block;
          height: 15px;
          margin-right: 5px;

          img {
            height: 100%;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.bot-func {
  text-align: left;
  background: #e8e8e8;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 8px 0 8px 10px;

  img {
    width: 15px;
    margin-right: 10px;
    cursor: pointer;

    &.disabled {
      opacity: 0.25;
      pointer-events: none;
    }
  }
}
</style>
